<template>
  <div class="charts">
    <p class="c-title">智能设备运营驾驶舱</p>
    <div class="top-border">
      <dv-decoration-8 style="width:300px;height:40px;margin-top:-45px" />
      <dv-decoration-5 :dur="5" style="width:600px;height:40px;margin:-30px auto" />
      <dv-decoration-8 :reverse="true" style="width:300px;height:40px;margin-top:-45px" />
    </div>
    <div class="full" @click="info"><dv-border-box-12 >全屏</dv-border-box-12></div>
    <div class="charts-all">
      <el-row :gutter="2">
        <el-col :span="6">
          <div class="box-a">
            <div class="box1">
              <dv-border-box-13>
                <div class="charts-title"><span>>></span>设备可动率</div>
                <div class="PM"><e-charts style="width: 110%;margin-top: 1vh;height: 26vh" autoresize :option="option6" /></div>
              </dv-border-box-13>
            </div>
            <div class="box2">
              <dv-border-box-13>
                <div class="chats-b">
                  <div class="charts-title"><span>>></span>{{ month }}月 MTBF</div>
                  <div class="chart-a"><e-charts style="height: 25vh;width: 22vw;margin-left: 0.8vw" autoresize :option="option1" /></div>
                </div>
                <div class="chats-a">
                  <div class="charts-title2"><span>>></span>{{ month }}月 MTTR</div>
                  <div class="chart-a"><e-charts style="height: 24.5vh;width:100%;margin-left: 0.7vw" autoresize :option="option2" /></div>
                </div>
              </dv-border-box-13>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box-b">
            <div class="box3">
              <dv-border-box-8 :dur="10">
                <div class="m-title">当日自主点检</div>
                <div class="t_row">
                  <div class="v-row">
                    <div class="row_item">
                      <span>{{ parseInt(workshop1[1].value)}}%</span>
                      <div class="d1"></div>
                    </div>
                    <div class="row_item">
                      <span>{{ parseInt(workshop1[0].value)}}%</span>
                      <div class="d2"></div>
                      <p>冲压车间</p>
                    </div>
                    <div class="row_item">
                      <span>{{ parseInt(workshop1[2].value)}}%</span>
                      <div class="d3"></div>
                    </div>
                  </div>
                  <div class="v-row">
                    <div class="row_item">
                      <span>{{ parseInt(workshop2[1].value)}}%</span>
                      <div class="d1"></div>
                    </div>
                    <div class="row_item">
                      <span>{{ parseInt(workshop2[0].value)}}%</span>
                      <div class="d2"></div>
                      <p>车身车间</p>
                    </div>
                    <div class="row_item">
                      <span>{{ parseInt(workshop2[2].value)}}%</span>
                      <div class="d3"></div>
                    </div>
                  </div>
                  <div class="v-row">
                    <div class="row_item">
                      <span>{{ parseInt(workshop3[1].value)}}%</span>
                      <div class="d1"></div>
                    </div>
                    <div class="row_item">
                      <span>{{ parseInt(workshop3[0].value)}}%</span>
                      <div class="d2"></div>
                      <p>涂装车间</p>
                    </div>
                    <div class="row_item">
                      <span>{{ parseInt(workshop3[2].value)}}%</span>
                      <div class="d3"></div>
                    </div>
                  </div>
                  <div class="v-row">
                    <div class="row_item">
                      <span>{{ parseInt(workshop4[1].value)}}%</span>
                      <div class="d1"></div>
                    </div>
                    <div class="row_item">
                      <span>{{ parseInt(workshop4[0].value)}}%</span>
                      <div class="d2"></div>
                      <p>总装车间</p>
                    </div>
                    <div class="row_item">
                      <span>{{ parseInt(workshop4[2].value)}}%</span>
                      <div class="d3"></div>
                    </div>
                  </div>
                </div>
                <div class="t_row2">
                  <div class="v-row2">
                    <div class="row_item">
                      <span>{{ parseInt(workshop9[1].value)}}%</span>
                      <div class="d1"></div>
                    </div>
                    <div class="row_item">
                      <span>{{ parseInt(workshop9[0].value)}}%</span>
                      <div class="d2"></div>
                      <p>工厂</p>
                    </div>
                    <div class="row_item">
                      <span>{{ parseInt(workshop9[2].value)}}%</span>
                      <div class="d3"></div>
                    </div>
                  </div>
                  <div class="v-row2">
                  </div>
                  <div class="v-row2">
                  </div>
                  <div class="v-row2">
                  </div>
                </div>
                <div class="t_row">
                  <div class="v-row3">
                    <div class="row_item">
                      <span>{{ parseInt(workshop7[1].value)}}%</span>
                      <div class="d1"></div>
                    </div>
                    <div class="row_item">
                      <span>{{ parseInt(workshop7[0].value)}}%</span>
                      <div class="d2"></div>
                      <p>设备动力部</p>
                    </div>
                    <div class="row_item">
                      <span>{{ parseInt(workshop7[2].value)}}%</span>
                      <div class="d3"></div>
                    </div>
                  </div>
                  <div class="v-row3">
                    <div class="row_item">
                      <span>{{ parseInt(workshop6[1].value)}}%</span>
                      <div class="d1"></div>
                    </div>
                    <div class="row_item">
                      <span>{{ parseInt(workshop6[0].value)}}%</span>
                      <div class="d2"></div>
                      <p>质量控制部</p>
                    </div>
                    <div class="row_item">
                      <span>{{ parseInt(workshop6[2].value)}}%</span>
                      <div class="d3"></div>
                    </div>
                  </div>
                  <div class="v-row3">
                    <div class="row_item">
                      <span>{{ parseInt(workshop8[1].value)}}%</span>
                      <div class="d1"></div>
                    </div>
                    <div class="row_item">
                      <span>{{ parseInt(workshop8[0].value)}}%</span>
                      <div class="d2"></div>
                      <p>安全生产部</p>
                    </div>
                    <div class="row_item">
                      <span>{{ parseInt(workshop8[2].value)}}%</span>
                      <div class="d3"></div>
                    </div>
                  </div>
                  <div class="v-row3">
                    <div class="row_item">
                      <span>{{ parseInt(workshop5[1].value)}}%</span>
                      <div class="d1"></div>
                    </div>
                    <div class="row_item">
                      <span>{{ parseInt(workshop5[0].value)}}%</span>
                      <div class="d2"></div>
                      <p>物流部</p>
                    </div>
                    <div class="row_item">
                      <span>{{ parseInt(workshop5[2].value)}}%</span>
                      <div class="d3"></div>
                    </div>
                  </div>
                </div>
              </dv-border-box-8>
            </div>
            <div class="box4">
              <dv-border-box-13>
                <div class="mid-b">
                  <div>
                    <div class="charts-title3"><span>>></span>自主维护</div>
                    <div class="chart-a"><e-charts style="height: 29vh;width: 395%;margin-left: 12px" autoresize :option="option7" /></div>
                  </div>
                  <div>
                    <div class="charts-title3"><span>>></span>专业维护</div>
                    <div class="chart-a"><e-charts style="height: 29vh;width: 395%" autoresize :option="option8" /></div>
                  </div>
                </div>
              </dv-border-box-13>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="box-c">
            <div class="box6">
              <dv-border-box-13>
                <div class="charts-title"><span>>></span> {{ month }}月 故障数据统计 <span style="font-size: 14px;margin-left: 20px">上月总停线时间:{{ sum }}分钟</span></div>
                <div class="PM"><e-charts style="width: 110%;height: 27vh;margin-top: 2vh" autoresize :option="option14" /></div>
              </dv-border-box-13>
            </div>
            <div class="box5">
              <dv-border-box-13>
                <div class="chats-b">
                  <div class="charts-title"><span>>></span>当日各车间故障数据</div>
                  <div class="chart-a"><e-charts style="height: 24vh;width: 98%;margin-left: 1vw" autoresize :option="option11" /></div>
                </div>
                <div class="chats-a">
                  <div class="charts-title2"><span>>></span>当月各车间故障数据 </div>
                  <div class="chart-a"><e-charts style="height: 24vh;width: 98%;margin-left: 1vw" autoresize :option="option12" /></div>
                </div>
              </dv-border-box-13>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapGetters } from 'vuex'
import API from '@/api/charts'
import screenfull from 'screenfull'
export default {
  data() {
    return {
      fullscreenFlag: false,
      month: null,
      sum: null,
      time: [],
      list4: [],
      list2: [],
      list: [],
      list1: [],
      chart5: [],
      OEE: [],
      MTBF: [],
      MTTR: [],
      cm1: [],
      cm: [],
      factory: [],
      workshop1: [],
      workshop2: [],
      workshop3: [],
      workshop4: [],
      workshop5: [],
      workshop7: [],
      workshop6: [],
      workshop8: [],
      workshop9: [],
      chart6: [],
      chart7: [],
      chart8: [],
      chart1: {
        times: [],
        minute: []
      }
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ]),
    option1() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: this.MTBF
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（分钟）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + '分钟'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 分钟'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#047fdd' },
                { offset: 0.5, color: '#264dd6' },
                { offset: 1, color: '#3c2bd1' }
              ])
            }
          }
        ]
      }
    },
    option2() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: this.MTTR
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（分钟）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + '分钟'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 分钟'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#047fdd' },
                { offset: 0.5, color: '#264dd6' },
                { offset: 1, color: '#3c2bd1' }
              ])
            }
          }
        ]
      }
    },
    option20() {
      return {
        color: ['#047fdd', '#23c668', '#fc9701'],
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '46%',
          style: {
            text: '冲压',
            textAlign: 'center',
            fill: '#00deff',
            fontSize: 16,
            fontWeight: 400
          }
        },
        series: [
          {
            type: 'pie',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            radius: ['40%', '70%'],
            labelLine: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                }
              }
            },
            label: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                },
                textStyle: {
                  color: '#00deff',	// 提示文字颜色
                  fontSize: 12		// 提示文字大小
                }
              },
              position: 'center',
              textStyle: {
                color: '#fff',	// 提示文字颜色
                fontSize: 12		// 提示文字大小
              }
            },
            data: this.workshop1
          }
        ]
      }
    },
    option21() {
      return {
        color: ['#00deff', '#047fdd', '#fc9701'],
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '46%',
          style: {
            text: '工厂',
            textAlign: 'center',
            fill: '#00deff',
            fontSize: 16,
            fontWeight: 400
          }
        },
        series: [
          {
            type: 'pie',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            radius: ['40%', '70%'],
            labelLine: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                }
              }
            },
            label: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                },
                textStyle: {
                  color: '#00deff',	// 提示文字颜色
                  fontSize: 12		// 提示文字大小
                }
              },
              position: 'center',
              textStyle: {
                color: '#fff',	// 提示文字颜色
                fontSize: 12		// 提示文字大小
              }
            },
            data: this.workshop5
          }
        ]
      }
    },
    option22() {
      return {
        color: ['#047fdd', '#23c668', '#fc9701'],
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '46%',
          style: {
            text: '车身',
            textAlign: 'center',
            fill: '#00deff',
            fontSize: 16,
            fontWeight: 400
          }
        },
        series: [
          {
            type: 'pie',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            radius: ['40%', '70%'],
            labelLine: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                }
              }
            },
            label: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                },
                textStyle: {
                  color: '#00deff',	// 提示文字颜色
                  fontSize: 12		// 提示文字大小
                }
              },
              position: 'center',
              textStyle: {
                color: '#fff',	// 提示文字颜色
                fontSize: 12		// 提示文字大小
              }
            },
            data: this.workshop2
          }
        ]
      }
    },
    option23() {
      return {
        color: ['#047fdd', '#23c668', '#fc9701'],
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '46%',
          style: {
            text: '涂装',
            textAlign: 'center',
            fill: '#00deff',
            fontSize: 16,
            fontWeight: 400
          }
        },
        series: [
          {
            type: 'pie',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            radius: ['40%', '70%'],
            labelLine: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                }
              }
            },
            label: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                },
                textStyle: {
                  color: '#00deff',	// 提示文字颜色
                  fontSize: 12		// 提示文字大小
                }
              },
              position: 'center',
              textStyle: {
                color: '#fff',	// 提示文字颜色
                fontSize: 12		// 提示文字大小
              }
            },
            data: this.workshop3
          }
        ]
      }
    },
    option24() {
      return {
        color: ['#047fdd', '#23c668', '#fc9701'],
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '46%',
          style: {
            text: '总装',
            textAlign: 'center',
            fill: '#00deff',
            fontSize: 16,
            fontWeight: 400
          }
        },
        series: [
          {
            type: 'pie',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            radius: ['40%', '70%'],
            labelLine: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                }
              }
            },
            label: {
              normal: {
                show: true,
                length: 15, // 指示线长度
                lineStyle: {
                  color: '#fff' // 指示线颜色
                },
                textStyle: {
                  color: '#00deff',	// 提示文字颜色
                  fontSize: 12		// 提示文字大小
                }
              },
              position: 'center',
              textStyle: {
                color: '#fff',	// 提示文字颜色
                fontSize: 12		// 提示文字大小
              }
            },
            data: this.workshop4
          }
        ]
      }
    },
    option6() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        legend: {
          data: ['工厂', '指标'],
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: { // y轴文字的配置
              interval: 1,
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            },
            axisTick: {
              alignWithLabel: true
            },
            data: this.OEE.month
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: { show: false },
            name: '工厂（%）',
            min: 90,
            max: 100,
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            }
          },
          {
            type: 'value',
            splitLine: { show: false },
            min: 0,
            max: 0,
            position: 'left',
            offset: 110,
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            axisLabel: {
            }
          },
          {
            type: 'value',
            name: '指标（%）',
            min: 90,
            max: 100,
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            },
            axisLabel: {
            }
          }
        ],
        series: [
          {
            name: '工厂',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            barWidth: 18,
            itemStyle: {
              normal: {
                color: function(params) {
                  const colorList = [
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701']
                  ]
                  let index = colorList[params.dataIndex]
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: index[0]
                    },
                    {
                      offset: 0.5,
                      color: index[1]
                    },
                    {
                      offset: 1,
                      color: index[2]
                    }
                  ], false)
                },
                label: {
                  show: true,
                  // position: 'middle',
                  textStyle: {
                    color: '#fff',
                    fontSize: 16
                  }
                }
              }
            },
            data: this.factory
          },
          {
            name: '指标',
            type: 'line',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            yAxisIndex: 2,
            itemStyle: {
              color: 'red'
            },
            data: this.OEE.target
          }
        ]
      }
    },
    option7() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: this.chart6
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（%）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#fdd401' },
                { offset: 0.5, color: '#fdb602' },
                { offset: 1, color: '#fc9701' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff971a' },
                { offset: 0.5, color: '#fe661b' },
                { offset: 1, color: '#fe441b' }
              ])
            }
          }
        ]
      }
    },
    option8() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: this.chart7
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（%）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#fdd401' },
                { offset: 0.5, color: '#fdb602' },
                { offset: 1, color: '#fc9701' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' %'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff971a' },
                { offset: 0.5, color: '#fe661b' },
                { offset: 1, color: '#fe441b' }
              ])
            }
          }
        ]
      }
    },
    option11() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: this.cm
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          name: '次',
          minInterval: 1,
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '14%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 次'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#64dee3' },
                { offset: 0.5, color: '#3ab5e1' },
                { offset: 1, color: '#0685de' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '14%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 次'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          }
        ]
      }
    },
    option12() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: this.cm1
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          name: '次',
          minInterval: 1,
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '14%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 次'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#64dee3' },
                { offset: 0.5, color: '#3ab5e1' },
                { offset: 1, color: '#0685de' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '14%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 次'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          }
        ]
      }
    },
    option14() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        legend: {
          data: ['次数', '时间'],
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            },
            axisTick: {
              alignWithLabel: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            },
            data: this.chart8.factory
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '时间',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#253156'
              }
            },
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            }
          },
          {
            type: 'value',
            name: '次数',
            min: 0,
            max: 50,
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#253156'
              }
            },
            axisLabel: { // y轴文字的配置
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            }
          }
        ],
        series: [
          {
            name: '时间',
            type: 'bar',
            barWidth: 18,
            tooltip: {
              valueFormatter: function(value) {
                return value + '分钟'
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  const colorList = [
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701']
                  ]
                  let index = colorList[params.dataIndex]
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: index[0]
                    },
                    {
                      offset: 0.5,
                      color: index[1]
                    },
                    {
                      offset: 1,
                      color: index[2]
                    }
                  ], false)
                }
              }
            },
            data: this.chart8.time
          },
          {
            name: '次数',
            type: 'line',
            data: this.chart8.times,
            tooltip: {
              valueFormatter: function(value) {
                return value + '次'
              }
            }
          }
        ]
      }
    }
  },
  created() {
    this.index()
    this.chartsSum()
  },
  methods: {
    index() {
      const ct = new Date()
      if (ct.getMonth() === 0) {
        this.month = 12
      } else {
        this.month = ct.getMonth()
      }
      console.log(this.month)
      API.chart2({ plan_category: 2 }).then(res => {
        this.list2 = res.data
      }).catch()
      API.chart2({ plan_category: 1 }).then(res => {
        this.list1 = res.data
      })
      API.chart4().then(res => {
        this.chart5 = res.data
      })
      API.chart3().then(res => {
        this.chart1 = res.data
      })
      API.echartsOEE().then(res => {
        this.OEE = res.data
        const factory = this.OEE.factory
        factory.forEach(item => {
          this.factory.push(parseInt(item))
        })
      })
      API.echartsMTBF().then(res => {
        this.MTBF = res.data
      })
      API.echartsMTTR().then(res => {
        this.MTTR = res.data
      })
      API.chart5({ workshop_id: 94 }).then(res => {
        this.workshop1 = res.data
      })
      API.chart5({ workshop_id: 97 }).then(res => {
        this.workshop2 = res.data
      })
      API.chart5({ workshop_id: 96 }).then(res => {
        this.workshop3 = res.data
      })
      API.chart5({ workshop_id: 95 }).then(res => {
        this.workshop4 = res.data
      })
      API.chart5({ workshop_id: 221 }).then(res => {
        this.workshop8 = res.data
      })
      API.chart5({ workshop_id: 91 }).then(res => {
        this.workshop7 = res.data
      })
      API.chart5({ workshop_id: 93 }).then(res => {
        this.workshop6 = res.data
      })
      API.chart5({ workshop_id: 92 }).then(res => {
        this.workshop5 = res.data
      })
      API.chart5().then(res => {
        this.workshop9 = res.data
      })
      API.chart6().then(res => {
        this.chart6 = res.data
      })
      API.chart7().then(res => {
        this.chart7 = res.data
      })
      API.chart8().then(res => {
        this.chart8 = res.data
      })
      API.cm().then(res => {
        this.cm = res.data
      })
      API.cm({ period: 'month' }).then(res => {
        this.cm1 = res.data
      })
    },
    chartsSum() {
      API.chart8().then(res => {
        this.time = res.data.time
        this.time.forEach(item => {
          this.sum += parseInt(item)
        })
      })
    },
    info() {
      screenfull.toggle()
      this.$router.push('/baobiao')
    }
  }
}
</script>
<style scoped>
  .charts{
    width: 100%;
    height: calc(100vh - 30px);
    margin-top: -10px;
    background-image: url("../../assets/index-bg.png");
    background-size: 100% 100%;
    background-color: #0c1330;
    background-repeat: no-repeat;
    overflow: hidden;
  }
  .c-title{
    font-size: 28px;
    color: #00deff;
    text-align: center;
    display: block;
  }
  .box1{
    height: 28vh;
    /*background-image: url("../../assets/box1.png");*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .box2{
    height: 52vh;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
  }
  .box3{
    height: 51vh;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow:hidden;
    padding-top: 10px;
    background-image: url("../../assets/planform.png");
  }
  .box4{
    height: 30vh;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .box5{
    height: 50vh;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly ;
  }
  .box6{
    height: 30vh;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .charts-title{
    color: #00deff;
    margin-top: 8px;
    padding-top: 20px;
    margin-left: 16px;
  }
  .charts-title span{
    margin-right: 4px;
  }
  .charts-title2{
    color: #00deff;
    margin-left: 16px;
  }
  .charts-title2 span{
    margin-right: 4px;
  }
  .charts-title3 {
    color: #00deff;
    padding-top: 24px;
    color: #00deff;
  }
  .charts-title3 span{
    margin-right: 4px;
    padding-top: 10px;
  }
  .PM{
    width: 100%;
    height: 100%;
  }
  .charts1{
    margin-left: -10%;
    margin-top: -4%;
  }
  .charts2{
    height: 22vh;
  }
  .charts-title span{
    background-image: url("../../assets/box1.png");
    width: 100px;
    height: 30vh;
    background-size: 100% 100%;
    background-color: #0c1330;
    background-repeat: no-repeat;
  }
  .charts-all{
    height: 100%;
    padding: 0 1vw 0;
  }
  .box-a{
    height: 82vh;
    display: flex;
    flex-direction:column;
    justify-content: space-between;
  }
  .box-b{
    height: 82vh;
    display: flex;
    flex-direction:column;
    justify-content: space-between;
  }
  .box-c{
    height: 82vh;
    display: flex;
    flex-direction:column;
    justify-content: space-between;
  }
  .m-title {
    color: white;
    font-size: 20px;
    text-align: center;
    padding-top: 20px;
  }
  .charts img {
    position: fixed;
    left: 18px;
    top:20px
  }
  .mid-b{
    display: flex;
    margin-left: 0.8vw;
    justify-content: space-evenly;
  }
  .full{
    position: fixed;
    cursor:pointer;
    color: #00deff;
    font-size: 16px;
    /*border: 1px solid #00deff;*/
    margin-left: 3vw;
    margin-top: -70px;
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 2.6;
  }
  .top-border{
    display: flex;
  }
  .chats-a{
    margin-top: -20px;
  }
  .v-row{
    width: 20%;
    display: flex;
    justify-content: space-around;
    padding-top: 30px;
    color: #fff;
  }
  .v-row2{
    width: 20%;
    display: flex;
    justify-content: space-around;
    margin-top: 48px;
    color: #fff;
  }
  .v-row3{
    width: 20%;
    display: flex;
    justify-content: space-around;
    margin-top: 45px;
    color: #fff;
  }
  .d1{
    width: 8px;
    height: 8px;
    background-color: green;
    border-radius: 50%;
  }
  .d2{
    width: 8px;
    height: 8px;
    background-color: dodgerblue;
    border-radius: 50%;
  }
  .d3{
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
  }
  .row_item{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .t_row{
    display: flex;
    justify-content: space-around;
  }
  .t_row2{
    display: flex;
    justify-content: space-around;
  }
</style>

